import React from 'react';
import thunk from 'redux-thunk';
import ReactDOM from 'react-dom';
import 'antd/dist/antd.css';
import './index.css';
import {PropTypes} from 'react';
import { Row, Col, Slider, Card, Switch, Meta, Avatar } from 'antd';
import { EditOutlined, CloseOutlined } from '@ant-design/icons';
// import { setOpen } from '../action/actions.js';
import { connect } from 'react-redux';

function mapStateToProps(state) {
  return {
    openDrawer: state.openDrawer,
	componentList: state.componentList,
	
  };
}
// mapDispatchToProps：将dispatch映射到组件的props中
const mapDispatchToProps = (dispatch, ownProps) => {
  return {
    onEdit:(data)=>{
		dispatch({ type: 'OPEN_DRAWER', data: true })
		dispatch({ type: 'CHANGE_OPTION_TYPE', data: "edit" })
		dispatch({ type: 'CHANGE_EDIT_ITEM', data: data })
	},
	onInsert:()=>{
		dispatch({ type: 'OPEN_DRAWER', data: true })
		dispatch({ type: 'CHANGE_OPTION_TYPE', data: "insert" })
		
	},
	onClose:()=>{
		dispatch({ type: 'OPEN_DRAWER', data: false })
	},
  };
};

class List extends React.Component {

  render() {
	 
    return (
      <>
        <Row gutter={[6, 6]}>
          <Col span={6}>
            <Card onClick={this.props.onInsert}>新增组件</Card>
          </Col>
          {this.props.componentList.map((item) => {
            return (
              <Col span={6}>
                <Card
                  actions={[
                    <EditOutlined style={{ fontSize: '16px' }} key="edit" 
					onClick={() => {
						this.props.onEdit(item)
					}} />,
                    <CloseOutlined key="close" />,
                  ]}
                >
                  <Row justify="start">
                    <Col span={22}>
                      <span className="name-label">{item.name}</span>
                    </Col>
                  </Row>
                  <Row justify="space-between">
                    <Col span={8}>
                      <Row justify="center">
                        <Col span={24}>
                          <span className="type-label">组件类型</span>
                        </Col>
                        <Col span={24}>
                          <span className="type-content">
                            {item.type.toString()}
                          </span>
                        </Col>
                      </Row>
                    </Col>
                    <Col span={8}>
                      <span className="type-label">启动状态</span>
                      <Switch
                        defaultChecked={
                          item.state.value == 'enabled' ? true : false
                        }
                      />
                    </Col>
                  </Row>
                </Card>
              </Col>
            );
          })}
        </Row>
      </>
    );
  }
}

export default connect(mapStateToProps,mapDispatchToProps)(List);
